import React, { Component } from 'react';

import Child from '../child';

import banner1 from '../../assets/img/15380424325886.jpg';
import banner2 from '../../assets/img/15381295055947.jpg';
import banner3 from '../../assets/img/15381294046823.jpg';


import secicon1 from '../../assets/icon/section/icon_tit1.png';
import secicon2 from '../../assets/icon/section/icon_tit2.png';
import secicon3 from '../../assets/icon/section/icon_tit3.png';
import secicon4 from '../../assets/icon/section/icon_tit4.png';
import secicon5 from '../../assets/icon/section/icon_tit5.png';



import { Carousel,WingBlank,Flex,Button, List } from 'antd-mobile';
import {NavLink} from 'react-router-dom';


/*data */
import {navdata,newslist} from '../../data/index';

//函数定义组件
function Square(props) {
    function testFunc(){
        console.log('test')
    }
    return (
      <button className="square" onClick={testFunc}>
        {props.value}
      </button>
    );
  }
function outerFunc(){
    console.log('outerFunc');
}

function NewsList(){
    const list = (
        newslist.map((item,index)=>
        <NavLink className="artical-link common-border bottom" to={item.link} key={index}>
            <img src={item.img} className="artical-link-img"/>
            <span className="artical-link-title">{item.title}</span>                         
        </NavLink>
        )
    )
    return list;
}
  //class定义组件
class Index extends Component {
    constructor(){
        super();
        this.toTopBtnShow = '1';
        this.test = 1;
        this.state = {
            test: 1
        }

        //利用bind解决事件处理函数自动触发问题
        this.testFunc1 = this.testFunc1.bind(this);
    }
    componentDidMount() {
    }
    testFunc(){
        //setState操作的是this.state.test,跟this.test无关
        this.setState({test: 2},function(){
            //注意setState是异步生效的，所以在回调中才能拿到更新后的值
            //console.log(this.test);
            //console.log(this.state.test);
        });

    }
    testFunc1(){
        console.log('利用bind解决事件处理函数自动触发问题');
    }
    childFunc(str,e){
        console.log('我是通过props传给子组件调用的',str);
        console.log(e);
    }
    render() {
        return (
            <div className="page-index">
                <div className="fixed-bar-top">
                    <div className="fixed-top-wrapper" style={{"top":"0"}}>
                        <div className="anchor-item">
                            <span className="sec-title-text inline-text-item">手机网站</span>
                        </div>
                        <div className="anchor-item">
                            <span className="sec-title-text inline-text-item">今日头条</span>
                        </div>
                        <div className="anchor-item">
                            <span className="sec-title-text inline-text-item">视频</span>
                            <span className="sec-title-text inline-text-item vertical-bar">|</span>
                            <span className="sec-title-text inline-text-item">漫画</span>
                        </div>
                        <div className="anchor-item">
                            <span className="sec-title-text inline-text-item">智能硬件</span>
                        </div>
                        <div className="anchor-item">
                            <span className="sec-title-text inline-text-item">新机速递</span>
                        </div>
                        <div className="anchor-item">
                            <span className="sec-title-text inline-text-item">大家都在玩</span>
                        </div>   
                    </div>             
                </div>
                <section className="banner">
                <WingBlank>
                    <Carousel
                    autoplay={true}
                    infinite
                    >
                    <div key={1} className="banner-item">
                        <a href="#">
                        <img src={banner1}/>
                        <span>国庆换机怎么选？物美价廉强机排行榜！</span>
                        </a>
                    </div>
                    <div key={2} className="banner-item">
                        <a href="#">
                        <img src={banner2}/>
                        <span>40h不插电全程玩 荣耀8X Max陪我去拉萨</span>
                        </a>
                    </div>
                    <div key={3} className="banner-item">
                        <a href="#">
                        <img src={banner3}/>
                        <span>时下最IN的潮机推荐 你没理由错过它们</span>
                        </a>
                    </div>
                    </Carousel>
                </WingBlank>
                </section>

                <header className="nav sec-wrapper common-border bottom">
                {
                    navdata.map((row,index)=>
                    <Flex key={index}>
                        {
                            row.map((nav,colIndex)=>
                            <Flex.Item className="nav-flex-item" key={'col' + colIndex}>
                                <NavLink to={nav.link}>
                                <img className="nav-icon" src={nav.icon}/>
                                <span className="nav-text">{nav.title}</span>
                                </NavLink>
                            </Flex.Item>
                            )
                        }
                    </Flex>
                    )
                }
                   
                </header>

                <section className="news sec-wrapper common-border top bottom">
                    <div className="sec-title common-border bottom">
                        <Flex justify="between">
                        <div className="sec-title-left">
                            <img className="sec-title-icon" src={secicon1}/>
                            <span className="sec-title-text inline-text-item">今日头条</span>
                        </div>
                        <div className="sec-title-right">
                            <a href="#" className="sec-title-link inline-text-item">首发测评</a>
                            <span className="vertical-bar inline-text-item">|</span>
                            <a href="#" className="sec-title-link inline-text-item">新机汇总</a>
                        </div>
                        </Flex>
                    </div>
                    <div className="sec-content">
                        <div className="artical-list">
                            <NewsList/>
                        </div>
                    </div>
                </section>
                <section className="audio sec-wrapper common-border top bottom">
                    <div className="sec-title common-border bottom">
                        <Flex justify="between">
                        <div className="sec-title-left">
                            <img className="sec-title-icon" src={secicon2}/>
                            <span className="sec-title-text inline-text-item">视频</span>
                            <span className="sec-title-text inline-text-item vertical-bar">|</span>
                            <span className="sec-title-text inline-text-item">漫画</span>
                        </div>
                        <div className="sec-title-right">

                        </div>
                        </Flex>
                    </div>
                    <div className="sec-content">
                        <div className="artical-list">
                            <NewsList/>
                        </div>
                    </div>
                </section>
                <section className="hardwares sec-wrapper common-border top bottom">
                    <div className="sec-title common-border bottom">
                        <Flex justify="between">
                        <div className="sec-title-left">
                            <img className="sec-title-icon" src={secicon3}/>
                            <span className="sec-title-text inline-text-item">智能硬件</span>
                        </div>
                        <div className="sec-title-right">
                            <a href="#" className="sec-title-link inline-text-item"><i className="fa fa-refresh"></i>换一批</a>
                        </div>
                        </Flex>
                    </div>
                    <div className="sec-content">
                        <div className="artical-list">
                            <NewsList/>
                        </div>
                    </div>
                </section>
                <section className="new-phone sec-wrapper common-border top bottom">
                    <div className="sec-title common-border bottom">
                        <Flex justify="between">
                        <div className="sec-title-left">
                            <img className="sec-title-icon" src={secicon4}/>
                            <span className="sec-title-text inline-text-item">新机速递</span>
                        </div>
                        <div className="sec-title-right">

                        </div>
                        </Flex>
                    </div>
                    <div className="sec-content">
                        <div className="artical-list">
                            <NewsList/>
                        </div>
                    </div>
                </section>
                <section className="softwares sec-wrapper common-border top bottom">
                    <div className="sec-title common-border bottom">
                        <Flex justify="between">
                        <div className="sec-title-left">
                            <img className="sec-title-icon" src={secicon5}/>
                            <span className="sec-title-text inline-text-item">大家都在玩</span>
                        </div>
                        <div className="sec-title-right">
                            <a href="#" className="sec-title-link inline-text-item">更多</a>
                        </div>
                        </Flex>
                    </div>
                    <div className="sec-content">
                        <div className="artical-list">
                            <NewsList/>
                        </div>  
                    </div>
                    {/*<Square value="qweqew" onClick={()=>alert(1)}/>*/}
                </section>
                {/*注意onClick后面不能直接写this.testFunc()，这样该函数会在挂载的时候立即执行，而是应该把this.testFunc()的调用放在匿名箭头函数内，
                这点好像跟class的机制有关，观察下面触发outerFunc的按钮就可以发现，outerFunc不是在class的成员，该按钮就不存在此问题，并且虽然匿名箭头函数可以解决该问题，但是可能导致额外的重新渲染会带来性能问题，这点react文档的事件处理部分有介绍*/}
                {/*<button onClick={()=>this.testFunc()}>test</button>*/}
                {/*<button onClick={outerFunc}>outerFunc</button>*/}


                {/*或者利用bind方式解决事件处理函数自动执行的问题*/}
                {/*<button onClick={this.testFunc1}>testFunc1</button>*/}

                {/*测试传递方法给子组件*/}
                {/*<Child childFunc={this.childFunc}/>*/}
            </div>
        );
  }
}

export default Index;
